<!--
 * @Author: yangzr 1076420747@qq.com
 * @Date: 2022-10-10 16:02:11
 * @LastEditors: yangzr 1076420747@qq.com
 * @LastEditTime: 2022-12-30 14:52:28
 * @FilePath: \ktgj-crm\src\views\reservation\hotelOrderException.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-form ref="form" :model="selectData" label-width="110px" inline style="margin:15px">
      <el-form-item label="入住人姓名">
        <el-input v-model="selectData.person" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="入住人手机号">
        <el-input v-model="selectData.personPhone" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="酒店名称">
        <el-input v-model="selectData.hotelName" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="预定开始时间">
        <el-date-picker v-model="selectData.reserveTime" type="date" size="mini" :value-format="format"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="预定结束时间">
        <el-date-picker v-model="selectData.reserveEndTime" type="date" size="mini" :value-format="format"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" :data="tableList" size="mini" border stripe>
      <el-table-column label="入住人" prop="person" width="90"></el-table-column>
      <el-table-column label="手机号" prop="personPhone" width="120"></el-table-column>
      <el-table-column label="酒店名称" prop="hotelName" width="130"></el-table-column>
      <el-table-column label="预定时间" prop="reserveTime" width="100"></el-table-column>
      <el-table-column label="异常错误信息" prop="exceptionInfo" ></el-table-column>
      <el-table-column label="订单来源" prop="sourceWay" width="130"></el-table-column>
      <el-table-column label=" 状态" prop=" status" width="90">
        <template slot-scope="scope">
          <template v-if="scope.row.status =='processed'">已处理</template>
          <template v-if="scope.row.status =='untreated'">未处理</template>
        </template>
      </el-table-column>
      <el-table-column label="操作人" prop="opreator" width="130"></el-table-column>
      <el-table-column label="处理时间" prop="opreateTime" width="130"></el-table-column>
      <el-table-column label="订单号" prop="orderId" width="130"></el-table-column>
      <el-table-column label=" 订单类型" prop="orderType" width="130">
        <template slot-scope="scope">
          <template v-if="scope.row.orderType =='reserve'">预定</template>
          <template v-if="scope.row.orderType =='outTickets'">出票</template>
        </template>
      </el-table-column>


    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        format: "yyyy-MM-dd HH:mm:ss",
        // 查询数据
        selectData: {
          person: "", //入住人姓名
          personPhone: "", //入住人手机号
          hotelName: "", //酒店名称
          reserveTime: "", //预定时间
          reserveEndTime: ""
        },

        //分页
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        // 表格数据
        tableList: []

      };
    },
    watch: {},

    methods: {
      //分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getHotelExceptionList();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);

        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getHotelExceptionList();
        // orders = res.data;
      },

      search() {
        localStorage.setItem("pageNum", 1);
        localStorage.setItem("pageSize", 10);
        this.getHotelExceptionList();
      },
      //列表
      getHotelExceptionList() {
        this.$axios.getHotelExceptionList({
          person: this.selectData.person,
          personPhone: this.selectData.personPhone,
          hotelName: this.selectData.hotelName,
          reserveTime: this.selectData.reserveTime ,
          reserveEndTime: this.selectData.reserveEndTime ,

        }).then((res) => {
          if (res.code == 200) {
            this.tableList = res.data
            this.pageTotal = res.total
          }
        });
      },
    },

    mounted() {
      this.getHotelExceptionList()
    },
  };
</script>
<style scoped>

</style>